﻿/**
 * index.css
 * @date 2016-07-18
 * @author SongCR
 */
body{color:#222;-webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;}
body,button,input,select,textarea {font-family:微软雅黑,Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;font-size:62.5%; line-height:1.5;}
ol,ul{list-style:none;}
html,body{ width:100%; height:100%; overflow:hidden;}
input::-ms-clear { display: none; }
.top-navg{background: url(../img/bg_k.png)  40% 0;width: 100%;height: 60px;position: fixed;z-index: 99999; box-shadow: 0px 0px 1px 0px #980200;}
.logo{padding: 0;float: left;width: 33%;margin-top: 9px;}
.section-wrap{ width:100%;height:100%;overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1); margin-top:60px; }
.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}
.section-wrap .section .title{width:100%;font-size:2.4em;text-align:center;padding-top: 4%;}
.section-wrap .section .title p{ padding:0 4%;}
.section .title.active .til_size{font-size: 27px;}
.section-wrap .section-1{background:url(../img/bg_1.jpg)center no-repeat;background-size:cover; width: 100%;height:100%;}
.section-wrap .section-2{ background-color:#F2F2F2}
.section-wrap .section-3{    background: #EF4340;width: 100%;height: 100%;}
.section-wrap .section-3 .pic_3{background:url(../img/bg_3.png)center no-repeat ;width: 100%;height: 100%;background-size: 100% 103%;}
.section-wrap .section-7{width: 100%;height:100%; margin-left: -2px}
.section-wrap .section-8{width: 100%;height:100%; margin-left: -2px}
.section-wrap .section-3 .pic_3,.section-wrap .section-5.pic_5{width: 100%;height: 100%;}
.section-wrap .section-7 .pic_7{width: 100%;height:100%;background:url(../img/bg6.jpg)center no-repeat;background-size: 100% 100%;}
.container{position: relative;height: 100%;}
.section-wrap .section-8 .pic_8{width: 100%;height:100%;background:#F2F2F2;}
.section-wrap .section-4{ background-color:#f2f2f2}
.section-4 {background:#F2F2F2; }
.section-wrap .section-5{ background-color:#fff}
.section-5 .pic_5 .audio_ch1{width:100%;height: 30%;margin-top: 50px;}
.section-6 .pic_bt{background-color:#363636; width:100%;height: 126px;position: absolute;bottom: 0;}
.put-section-0{ transform:translateY(0);-webkit-transform:translateY(0);}
.put-section-1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}
.put-section-2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}
.put-section-3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);}
.put-section-4{ transform:translateY(-400%);-webkit-transform:translateY(-400%);}
.put-section-5{ transform:translateY(-500%);-webkit-transform:translateY(-500%);}
.put-section-6{ transform:translateY(-600%);-webkit-transform:translateY(-600%);}
.put-section-7{ transform:translateY(-700%);-webkit-transform:translateY(-700%);}
.section-btn{ width:14px;position:fixed;right:4%;top:25%;}
.section-btn li{ width:14px;height:14px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; background:#BD362F;text-align:center;  onsor:pointer;}
.section-btn li.on{ background:#fff}
.arrow{ opacity:1;animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;-webkit-animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;transform:rotate(-90deg);-webkit-transform:rotate(-90deg); position:absolute;bottom:10px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:100%;  border-radius:100%;line-height:60px;text-align:center;font-size:20px;border:1px solid #fff;cursor:pointer;overflow:hidden;}
.arrow:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;}
@keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
@-webkit-keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
.login_r{float: right;margin-top:18px;margin-right: 15px;font-size: 12px;}
.login_btn{width: 45px;height: 22px;color: #F34338;letter-spacing: 1px;background: white;outline: medium;-webkit-appearance: none;border-radius: 2px;opacity: 0.8;cursor: pointer;display:inline-block;text-align: center;line-height: 21px;}
.login_btn:hover{color:#F34338;text-decoration:none; }
.online_s{width: 150px;height: 25px;line-height: 25px;letter-spacing: 1px;cursor: pointer;color: white;margin-left: 30px;}
.online_s:hover{text-decoration: none;color:#fff;}
.online_s:visited{text-decoration: none;color:#fff;}
.ch-grid { margin: 20px 0 0 0;padding: 0;list-style: none;display: block;text-align: center; width: 100%;}
.adv_logo {width: 66px;height: 18px;background: #000;color: white;text-align: center;float: right;font-size: 10px;
    -ms-transform-origin-x: 0;-ms-transform: scale(0.750);-webkit-transform-origin-x: 0;-webkit-transform: scale(0.750);-moz-transform-origin: 0;-moz-transform: scale(0.750); background-color: rgba(0,0,0,0.2);}
.countdown {-moz-width:50px;  width: 66px;height: 18px;line-height: 18px;background: #000;color: white;text-align: center;float: right;background-color: rgba(0,0,0,0.2);font-size: 10px;-moz-transform-origin: 0;
    -ms-transform-origin-x: 0;-ms-transform: scale(0.750);-moz-transform: scale(0.750); -webkit-transform-origin-x: 0; -webkit-transform: scale(0.750);letter-spacing: 1px;}
.countdown_a,.countdown_b{width: 66px;height: 18px;background: #000;color: white;text-align: center;position: absolute;font-size: 12px;display:none;background-color: rgba(0,0,0,0.2);font-size: 12px;
    -ms-transform-origin-x: 0;-ms-transform: scale(0.750);-moz-transform-origin: 0;-moz-transform: scale(0.750); -webkit-transform-origin-x: 0; -webkit-transform: scale(0.750);}
.adv-left{width:130px;height:610px;float:left;}
.adv-left ul{width:280px;height:100%;float:right;}
.adv-left ul li{width:280px;height:33%;margin-top:1px;padding: 45px 20px 0 0;}
.adv-left ul li h4{text-align:right;font-weight:bold;font-size:16px!important;}
.r_spot{display:none;background: url(../img/point.jpg)no-repeat;float: left;margin: 5px 0 0 -15px;width: 16px;height: 19px;}
.r_spot1{display:none;background: url(../img/point.jpg)no-repeat;float: left;margin: 5px 0 0 -15px;width: 16px;height: 19px;}
.r_spot2{display:none;background: url(../img/point.jpg)no-repeat;float: left;margin: 5px 0 0 -15px;width: 16px;height: 19px;}
.adv_line,.adv_line1,.adv_line2{width:100%;border-top:1px solid #E6E6E6;margin:15px 0;}
.adv_locker{width:210px;height:auto;float: right;color: #AFAFAF;}
.adv_locker1{width:330px;height:auto;float: left;color: #AFAFAF;font-size:12px;}
.adv-right ul{width:280px;height:100%;float:left;}
.adv-right ul li{width:430px;height:33%;margin-top:1px;padding: 45px 0 0 40px ;}
.playpause1{display: table;background: url(../img/sound.jpg);margin: -61px -95px 0 0;float: right;cursor: pointer;width: 100px;height: 100px;}
.playpause{display: table;background: url(../img/adv_pic.jpg);margin: -61px -95px 0 0;float: right;cursor: pointer;width: 100px;height: 100px;}
.playpause2{display: table;background: url(../img/adv_audio.jpg);margin: -61px -95px 0 0;float: right;cursor: pointer;width: 100px;height: 100px;}
.play,.play1,.play2{cursor: pointer;}
.adv-right ul li h4{text-align:left;font-weight:bold;font-size:16px!important;}
.process_r{width:44%;height:100%;float:right;}
.process_tit h4{font-size:20px;}
.process_content{width: 480px;font-size: 14px;}
.process_content p{color:#c2c2c2;}
.process_content span{opacity: 0.8;display: block;margin: 20px 0 0 0;position: relative;}
.process .bar{width:13px;border-top:2px solid #000;position: absolute;left: -18px;top: 9px;}
.inner-1,.inner-2{width:170px ;height:50px;float: left;padding:10px;}
.inner-1 .demo,.inner-2 .sdk{margin: 0 auto;  display: block;font-weight: 600; width: 150px;  height: 30px;  text-align: center;  border: 1px solid #000;  border-radius: 15px;  line-height: 28px;  color: #000;  font-size: 12px;}
.inner-1 .demo:hover,.inner-2 .sdk:hover{text-decoration: none}
.process_line{width:100%;height:500px;}
.section-wrap .section-8 .pic8{margin-top: 30px;}
.bg_login{width:100%;height:100%;background: #555;position: absolute;top:0;z-index: 100000;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;display: none;}
.ch-grid li {width: 30%;display: inline-table; }
.ch-img{width: 100%;height: 100%;position: relative;}
.ch-mp3{bottom:10px;}
.img-responsive{display:inline-block;}
.font_s1{color: #F34338;font-size:5.0em;margin-top: 30px;text-align: center; font-style:italic }
.font_s2{font-size:3.6em; text-align: left;}
.font_s3{font-size:2.0em;display: inline-block;max-width:231px; text-align: left;margin-top: 5px;}
.bg_pic{position: absolute;width: 100px;height: 100px;bottom: 0;}
.tit_sty{width: 100%; font-size: 5.4em!important;padding-top: 0!important;padding-left: 21%!important;text-align: left!important;}
.audio_ch {padding: 60px 15px 0 15px;}
.audio_ch p{font-size:2.0em;color: #999; letter-spacing: normal; word-spacing: normal;display: inline}
.span1{background: #FF6B6B;width: 6px;height: 6px;border-radius: 3px;display: inline-block;}
.span2{background: #00B8AE;width: 6px;height: 6px;border-radius: 3px;display: inline-block;}
.span3{background: #A6A2DB;width: 6px;height: 6px;border-radius: 3px;display: inline-block;}
.footer ul li{float: left;color: #929090;text-align: left; font-size:12px;}
.footer ul li a{display:inline-block;color: #929090; font-size:12px;}
.footer ul li span{margin: 0 10px;}
.footer{margin-top: 15px;min-width: 420px;}
.bg_6{width: 50%;height: 100%;}
.pic3_tit,.pic5_tit{padding: 23px 4px;}			    
.pic3_tit span{color: #fff;font-size: 7.6em;}
.pic5_tit span{color: #121212;font-size: 7.6em;}
.pic3_tit p{color: #fff;font-size: 5.6em;display: inline;}
.pic5_tit p{color: #E54351;font-size: 5.6em;display: inline;}
.pic5_tit  font{color: #424242;font-size: 4.6em;display: inline;}
.pic3_con ul li,.pic5_con ul li{padding: 10px 0}  
.pic3_con ul li span{color: #FEF7F7;font-size: 20px;}
.pic3_con ul li p{color: #FEF4F4;font-size: 20px;display: inline; opacity:0.9;}
.pic5_con ul li p{color:#5C5C5C;font-size: 18px;display: inline; opacity:0.9;}
.mask{ width: 39%;height: 100%;position: absolute;background-color: #000;top: 0px;right: 0px;opacity: 0.36;}
.bg_6 .inner_2{width: 50%;height: 68%;float: left;}
.bg_6 .inner_3{width: 50%;height: 68%;float: left;}
.bg_6 .inner_2 .inner_21,.bg_6 .inner_3 .inner_31{ width: 67%;height:55%;margin: 0 auto;}
.bg_6 .inner_2 .inner_22,.bg_6 .inner_3 .inner_32{width:90%;height:30%;margin: 30px auto;}
.inner_31{padding-top: 25%;}
.inner_31 ul li{color: #EAE7E8;font-size: 12px;}
.inner_31 span{width: 50px; display: inline-block;}
.inner_31 p{display: inline}
@media screen and (min-width: 500px) {
.process_tit{width: 100%;height: 40px;}
.inner-1,.inner-2{ margin:0px 0 0 20px;}
.down_load{width:100%;height:100px;margin-top:26px;}
.process_l{width:55%;height:100%;float:left;padding: 2px 0 0 12px;}
.stop_btn{width: 25px;height: 25px;margin:0 auto;margin-top: 33px;background:url(../img/start.png)no-repeat;background-size: 100% 100%;cursor: pointer; display: none;}
.start_btn{width: 25px;height: 25px;margin:0 auto;margin-top: 33px;background:url(../img/stop.png)no-repeat;background-size: 100% 100%;cursor: pointer;}
.adv_bg{width:163px;height:163px;margin:-1px auto;background: url(../img/adv_bg.jpg)no-repeat;background-size: 100% 100%;display: none; }
.adv_bg1{width:160px;height: 167px;margin:29px auto;}
.adv-right{width: 375px;height: 420px;float: left;}
.logo_k1{display: block;}
.logo_k2{display: none;}
.section-1,.section-3,.section-5,.section-6,.section-7,.section-8{min-width:1100px;}
.section-wrap .section-1 .pic1{width: 100%;min-width: 421px;position: absolute;top: 50%;margin-top: -215px;}
.pic3,.pic5{font-size: 80%}
.section-wrap .section-3 .pic3{width: 52%;min-width: 587px;position: absolute;top: 50%;margin-top: -180px;float: left;}
.section-wrap .section-5 .pic5{width: 40%;position: absolute;top: 50%;margin-top: -220px;float: left;}
.section-wrap .section-3 .pic31{background:url(../img/bg3_r.png)center no-repeat ;width: 50%;min-width: 421px;position: absolute; bottom: 57px; height: 88%;background-size: 80%; float: right;right: 1px;}
.section-wrap .section-7 .pic7{width: 52%;min-width: 587px;position: absolute;top: 50%;margin-top: -180px;float: left;}
.section-wrap .section-7 .pic71{width: 50%; position: absolute;right: 0px;top: 50%;margin-top: -270px;}
.section-wrap .section-8 .pic8 {width: 94%;position: absolute;float: left;}
.section-wrap .section-8 .pic8 img{width: 100%;}
.section-wrap .section-5 .pic51{width: 50%; position: absolute;right: 0px;top: 50%;margin-top: -307px;}
.section-5 .pic_5{ color:#000!important;width: 100%;height: 100%;}
.line{display: inline-block!important;}
.line2{display: none!important;}
.section-wrap .section .title.active .tit{ ;transform:translateY(-25px);-webkit-transform:translateY(-25px);transition:all 2s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);}
.section-6 .pic_top{background:url(../img/bg_6.jpg)center no-repeat ;width: 100%;height: 100%;background-size: 100% 100%; }
.bg_6 .inner_1{width: 100%;height: 30%;padding-top: 30px;padding-left: 10px;}
.picture{position: absolute;bottom: 30px;right: 5%;left: 51%;}
.bg_61{display: block;}
.bg_62{display: none;}
}
@media screen and  (min-width: 768px){
.container {width: 1100px;}
}
@media screen and (max-width: 1600px) {
.section-6 .pic_bt {height:114px;}
.adv_logo{margin-top: 147px;margin-right: -65px;}
.countdown {margin-right: -16px;margin-top: -2px;}
.scene{position: absolute;color: #fff;font-size: 16px;width:120px;text-align:center;}
.top1{top:19px;}
.top2{top:263px;}
.top3{top:430px}
.left1{left:8px;}
.left2{left:167px;}
.right1{right:107px;}
.top4{top:278px;}
.process_r { position:relative;}
.step{position: absolute;font-size: 12px;font-weight: bold;}
.step_l{left:118px;}
.step_r{right:202px;}
.t1{top:101px;}
.t2{top:142px;}
.t3{top:185px;}
.t4{top:226px;}
.t5{top:267px;}
.t6{top:308px;}
.process_line {margin-top: 28px;}
.process_r {margin-top: -40px;}
.vid{width:182px!important}
.countdown_a{right:-29px; top:15px;}
.countdown_b{bottom:46px;right:-29px;}
.section-wrap .bg_ph{background: url(../img/iphone.png)center no-repeat;width: 256px;height: 446px;background-size: 84%!important;margin: 0 auto;padding-top: 99px;}
.vid{ margin: 17px 0px 0 -9px; display:none;}
.process_line img{height:75%;}
.pic3,.pic5{font-size: 100%}
.pic51 img{width: 85%;margin-top: 15px;}
.process_l {margin-top: -10px;}
.pic71 img{width: 85%!important;}
}
@media screen and (min-width: 1600px) {
.adv_logo{margin-top:204px;margin-right: -66px;}
.countdown {margin-right: -17px;margin-top: -2px;}
.scene{position: absolute;color: #fff;font-size: 16px;opacity: 0.8; width:120px;text-align:center;}
.top1{top:26px;}
.top2{top:300px;}
.top3{top:483px}
.left1{left:17px;}
.left2{left:196px;}
.right1{right:56px;}
.top4{top:315px;}
.countdown_a{right:-40px;top:14px;}
.countdown_b{right: -38px;bottom:53px;}
.vid{ margin: 17px 0px 0 -19px; display:none;}
.ch-grid li:nth-child(1){text-align: left;}
.ch-grid li:nth-child(2){text-align: center;}
.ch-grid li:nth-child(3){text-align: right;}
.section-wrap .section-3 .pic31{background:url(../img/bg3_r.png)center no-repeat ;width: 50%;min-width: 421px;position: absolute; bottom: 57px; height: 88%;background-size: 90%; float: right;right: 1px;}
.adv-left{width:82px!important;}
.section-wrap .section-8 .pic8 {width: 100%;position: absolute;float: left;top: 50%;margin-top: -350px;}
.process_tit{width: 100%;height: 60px;}
.inner-1,.inner-2{ margin:0px 0 0 20px;}
.down_load{width:100%;height:100px;margin-top:25px;}
.process_r { position:relative;}
.step{position: absolute;font-size: 14px;font-weight: bold;}
.step_l{left:166px;}
.step_r{right:128px;}
.t1{top:99px;}
.t2{top:153px;}
.t3{top:209px;}
.t4{top:263px;}
.t5{top:318px;}
.t6{top:372px;}
.process_l{width:55%;height:100%;float:left;padding: 45px 0 0 0;}
.stop_btn{width: 30px;height: 30px;margin:0 auto;margin-top: 28px;background:url(../img/start.png)no-repeat;background-size: 100% 100%;cursor: pointer; display: none;}
.start_btn{width: 30px;height: 30px;margin:0 auto;margin-top: 28px;background:url(../img/stop.png)no-repeat;background-size: 100% 100%;cursor: pointer;}
.adv_bg{width:220px;height: 220px;margin:19px auto;background: url(../img/adv_bg.jpg)no-repeat;background-size: 100% 100%;display: none; }
.adv_bg1{width:218px;height: 218px;margin:70px auto;}
.section-wrap .bg_ph{background: url(../img/iphone.png)center no-repeat;width:305px;height:608px;background-size: 100% 100%;margin: 0 auto;padding-top:99px;}
.adv-right{width:375px;height:610px;float:left;margin-left:20px;}
.ch-grid { margin: 100px 0 0 0;}
.section-wrap .section .title{margin-top: 45px;}
.section .title.active .til_size{font-size: 2.6em;}
.tit_b{1.3em}
}
 
